import { Button, List, WhiteSpace, WingBlank, Badge, Checkbox, Card } from 'antd-mobile';
import React, { Component } from 'react';
import { View, StyleSheet, ScrollView, Image, FlatList, Text } from 'react-native';
import { Urls } from '../utils/Urls';

const Item = List.Item;
const CheckboxItem = Checkbox.CheckboxItem;

export class IndexAlarmStations extends Component {
    
    state = {
        stationList: []
    }
    componentWillMount() {
        let url = Urls.ALARM_STATION_LIST + "?pageSize=3";
        fetch(url)
            .then((response) => {
                console.log(response)
                var responsejson = JSON.parse(response._bodyInit);
                this.setState({
                    stationList: responsejson.content.list
                })
            })
            .catch((error) => {
                console.log(error);
            })
    }
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.contentContainer}>
                <Card>
                    <Card.Header
                        title="异常温度告警" extra={<Button onClick={() => navigate('AlarmTab')}>查看更多</Button>}
                    />
                    <Card.Body>
                        <FlatList
                            data={this.state.stationList}
                            renderItem={({ item, index }) => <Item key={index}
                                // extra={item.equipments + '个探头'}
                                arrow="horizontal"
                                onClick={() => navigate('AlarmListScreen', { id: item.station_id })}
                            >
                                {item.status == 0 ?
                                    <Badge dot>
                                        <Text>{item.name} </Text>
                                    </Badge>
                                    :
                                    <Text>{item.name} </Text>
                                }
                                {/* <Text>{item.name} </Text> */}
                            </Item>}
                            onEndReached={this._onEndReached}
                            keyExtractor={(item, index) => index}
                            ListEmptyComponent={this.emptyListRender}
                        />
                    </Card.Body>
                    
                    <WhiteSpace size="lg" />
                </Card>

            </View>
        );
    }
    _onEndReached = () => {
        // this.setState((state) => ({
        //   data: state.data.concat(genItemData(100, state.data.length)),
        // }));
        console.log("到底部了")
      };
    emptyListRender = () => {
        return (
            <Text>没有未读信息</Text>
          );
    }
}

const styles = StyleSheet.create({
    contentContainer: {
        padding: 10
    }
});
